<!--购物车页面  -->
<template>
<div>
    
<van-checkbox-group v-model="result">
  <van-checkbox 
      :name="item.id"
      v-for="item in cartList"
      @click="chxClickFn(item)"
      :key="item.id">
      <van-card 
      :num="item.number"
      :price="item.retail_price"
      :title="item.goods_name"
      :thumb="item.list_pic_url"
      /></van-checkbox>  
</van-checkbox-group>


<!-- 底部 -->
<van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持配送, <span>请修改地址再下单</span>
      </template>
    </van-submit-bar>
</div>
</template>
<script >
import {GetCartData} from "@/utils/https";
export default {
data(){
return{
    price:0,
    result:[],//选中的商品集合
    cartList:[],//购物车商品列表
};
},  computed: {
    // 全选的勾选按钮
    checkedAll: {
      get() {
        return this.result.length == this.cartList.length;
      },
      set(val) {
        console.log(val);
        if (val) {
          this.result = this.cartList.map((item) => item.id);
          // console.log(9, this.result);
          this.price = 0;
          this.cartList.map(
            (item) => (this.price += item.number * item.retail_price * 100)
          );
        } else {
          this.result = [];
          this.price = 0;
        }
      },
    },
  },created() {
    // 初始化请求购物车数据
    GetCartData().then((res) => {
      // console.log(res);
      if (res.data.errno == 0) {
        this.cartList = res.data.data.cartList;
      }
    });
  },methods: {
    chxClickFn(item) {
      if (this.result.includes(item.id)) {
        this.price += item.number * item.retail_price * 100;
      } else {
        this.price -= item.number * item.retail_price * 100;
      }
    },
    onSubmit(){
      // 提交订单按钮的
      if(this.result.length == 0 ){
       this.$toast("未选中商品");
      }else{
        this.$toast("跳转支付页面");
      }
    
      
  }
  }
  };
</script>
<style scoped lang="less">
/* @import url();引入css类 */
.van-submit-bar {
  bottom: 50px;
}
/deep/.van-checkbox__label {
  width: 100%;
}
</style>